<template>
  <div class="product">
    <div class="product_main">
      <!-- 产品图片 -->
      <div class="product_img">
        <van-swipe
          class="my-swipe"
          @change="onChange"
          :autoplay="3000"
          indicator-color="white"
        >
          <van-swipe-item v-for="(item, index) in img" :key="index">
            <img :src="item" />
          </van-swipe-item>
          <template #indicator>
            <div class="count">{{ count }}</div>
          </template>
        </van-swipe>
      </div>
      <!-- 商品详情 -->
      <div class="floor">
        <!-- 产品信息 -->
        <div class="floor-item">
          <div class="item-detail">
            <!--   传递数据到组件中显示 -->
            <!-- 产品 -->
            <div class="info" v-if="goodInfo.goodsStandard">
              <div class="price">
                <div class="priceNew fz18">
                  ￥{{ goodInfo.goodsStandard[0].cost_price }}
                </div>
                <div class="price_des fz12">
                  <span class="priceOld "
                    >原价：<del
                      >￥{{ goodInfo.goodsStandard[0].goods_price }}</del
                    ></span
                  >
                  <!-- 已售字段 -->
                  <span class="sell"
                    >已售:{{ goodInfo.goodsStandard[0].sell_num }}</span
                  >
                </div>
              </div>
              <div class="title eleto fz16">
                {{ goodInfo.goods_name }}
              </div>
            </div>
          </div>
        </div>
        <!-- 配送选择信息 -->
        <div class="floor-item">
          <div class="group" @click="safeguardShow = true">
            <div class="left">保障</div>
            <div class="center big">平台认证·口碑好货·正品保障·保密发货</div>
            <div class="right"><span></span></div>
          </div>
          <div class="group" @click="goToSelectInfo(0)">
            <div class="left">选择</div>
            <div class="center">配送至:浦东新区，请选择套餐</div>
            <div class="right"><span></span></div>
          </div>
          <!-- <div class="group" @click="goToSelectInfo(1)">
            <div class="left">参数</div>
            <div class="center">品牌 颜色分类 货号</div>
            <div class="right">></div>
          </div> -->
        </div>
        <!-- 好评如潮   先不展示-->
        <div v-if="false" class="floor-item">
          <div class="evaluate">
            <div class="titel  fz16">
              <div class="left">好评如潮(342)</div>
              <!-- 查看全部跳转新页面 -->
              <div class="right fz14" @click="showAllevaluate">
                查看全部<img src="@/assets/font/productArrYellow.png" />
              </div>
            </div>
            <div class="message fz14">
              <span>效果不错(11)</span>
              <span>体验很好(12)</span>
            </div>
            <div class="photo">
              <van-row>
                <van-col span="8"><img src="@/assets/矩形 3.png"/></van-col>
                <van-col span="8"><img src="@/assets/矩形 2.png"/></van-col>
                <van-col span="8"><img src="@/assets/矩形.png"/></van-col>
              </van-row>
            </div>
          </div>
        </div>
      </div>
      <!-- 产品详细信息 -->
      <div class="detOfGoods">
        <div class="divider fz16">
          <span></span>
          商品详情
          <span></span>
        </div>
        <!-- 产品图片 -->
        <div class="imgofGood" style="margin-left:-12px">
          <div class="item" v-for="(item, index) in goodInfoimg" :key="index">
            <img :src="item" />
          </div>
        </div>
      </div>
      <!-- 相关产品 ++++ -->
      <div v-if="false" class="aboutProduct">
        <div class="title fz14">相关产品</div>
        <div class="aboutProductList">
          <productItem
            class="item"
            v-for="(item, index) in 4"
            :key="index"
          ></productItem>
        </div>
      </div>
    </div>
    <!-- 保障的弹出层 -->
    <van-action-sheet v-model="safeguardShow" title="保障">
      <safeguard-info v-model="selectShowId"></safeguard-info>
    </van-action-sheet>

    <!-- 点击选择弹出遮罩层 -->
    <van-action-sheet v-model="selectShow">
      <select-info v-model="selectShowId"></select-info>
    </van-action-sheet>

    <!-- 底部加购 -->
    <van-goods-action class="buttom-car">
      <van-goods-action-icon
        icon="chat-o"
        text="首页"
        @click="$router.push('/home')"
        color="#ee0a24"
      />
      <van-goods-action-icon icon="cart-o" text="客服" />
      <van-goods-action-icon
        text="云仓"
        @click="$router.push('/myCloud')"
        color="#ff5000"
      >
        <template #icon>
          <span class="productCloud"></span>
        </template>
      </van-goods-action-icon>
      <van-goods-action-button
        @click="goToSelectInfo(1)"
        class="cloud"
        text="加入云仓"
      />
      <!-- <van-goods-action-button text="立即支付" /> -->
    </van-goods-action>
  </div>
</template>

<script>
import productItem from '@/components/productItem.vue'
// import goodProduct from './components/goodProduct.vue'
import safeguardInfo from './components/safeguardInfo'
import selectInfo from './components/selectInfo.vue'
import { getGoodsInfo } from '@/api/index.js'
export default {
  name: 'product',
  created() {
    this.$router.afterEach((to, from, next) => {
      window, scrollTo(0, 0)
    })
    //   根据id获取后台商品信息
    this.id = this.$route.query.id
    // console.log(this.id)
    this.getGoodsInfo() //获取商品信息
  },
  components: {
    safeguardInfo, //保障的组件
    selectInfo,
    productItem
  },
  data() {
    return {
      safeguardShow: false,
      selectShow: false,
      selectShowId: 0,
      count: `1/2`,
      goodInfo: '', //下面的详情
      img: [], //轮播
      goodInfoimg: [] //下面的轮播
    }
  },

  methods: {
    goToSelectInfo(id) {
      //   根据点击不同按钮传值显示按钮不同
      this.selectShow = true
      this.selectShowId = id
    },
    showAllevaluate() {
      // 查看全部跳转新页面
      this.$router.push('/allevaluate/1')
    },
    onChange(index) {
      //   this.$toast('当前 Swipe 索引：' + index)
      this.count = `${index + 1}/${this.img.length}`
    },
    // 根据id获取商品信息
    async getGoodsInfo() {
      try {
        const res = await getGoodsInfo(this.id)
        this.goodInfo = res.data //下面的图片
        // console.log(res.data)
        res.data.goodsShow.map(item => {
          return this.img.push(item.url)
        })
        // console.log(res.data.goodsInfo)
        res.data.goodsInfo.map(item => {
          //   console.log(item)
          return this.goodInfoimg.push(item.url)
        })
        // console.log(this.goodInfoimg)
        // this.img=res.data.goodsShow.filter()
        // this.goodsStandard = res.data.goodsStandard.filter(
        //   item => item.id === 1
        // )
        // console.log(this.goodsStandard)
        this.$store.commit('product/setGoodInfo', res.data)
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.product {
  //   background: #f7f6fb;
  padding-bottom: 50px;
  .product_img {
    width: 375px;
    height: 375px;
    background-color: #ccc;
    position: relative;
    img {
      width: 100%;
      // height: 375px;
    }
    .count {
      width: 42px;
      height: 18px;
      background: rgba(0, 0, 0, 0.5);
      position: absolute;
      right: 12px;
      bottom: 12px;
      text-align: center;
      //   padding: 1px 10px;
      border-radius: 9px;
      color: #fff;
      font-size: 12px;
    }
  }
  .floor {
    background-color: #f7f6fb;
    padding: 12px;
    // padding-bottom: 0px;   商品图上方有白色背景
    .floor-item {
      width: 351px;
      background-color: #fff;
      border-radius: 8px;
      margin-bottom: 12px;
      &:last-child {
        margin-bottom: 0;
      }
    }

    .group {
      overflow: hidden;
      font-size: 14px;
      font-weight: 400;
      color: x#1f0d44;
      line-height: 22px;
      padding: 12px;
      .left {
        float: left;
        margin-right: 16px;
        color: #afabb7;
      }
      .center {
        float: left;
        width: 190px;
        height: 22px;
        color: #1f0d44;
        &.big {
          height: 44px;
        }
      }
      .right {
        float: right;
        span {
          display: inline-block;
          width: 20px;
          height: 20px;
          background: url('~@/assets/font/productArr.png') 20px 20px / cover;
          vertical-align: bottom;
        }
      }
    }
    // 好评
    .evaluate {
      padding: 16px 12px;
      .titel {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        .right {
          display: flex;
          color: #ff6400;
          img {
            width: 20px;
            height: 20px;
            object-fit: cover;
          }
        }
      }
      //   评论
      .message {
        color: #622ccc;
        margin: 16px 0;
        span {
          margin-right: 16px;
          padding: 4px 16px;
          background: #f7f6fb;
          border-radius: 14px;
        }
      }
      //   返图
      .van-col {
        width: 105px;
        height: 105px;
        margin-right: 6px;
        &:last-child {
          margin-right: 0;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  //   商品价格
  .item-detail {
    height: 114px;
    width: 343px;
    // height: 260px;
    padding: 12px 12px 16px 12px;
    .info {
      .price {
        display: flex;
        align-items: flex-end;
        height: 28px;
        position: relative;
        .priceNew {
          line-height: 28px;
          padding-right: 9px;
        }
        .price_des {
          height: 16px;
          line-height: 16px;
          .sell {
            position: absolute;
            right: 0;
          }
        }
      }
      .title.eleto {
        margin-top: 10px;
      }
    }
  }

  // 产品详情
  .detOfGoods {
    // margin-top: -12px;
    padding-bottom: 206px;
    background-color: #fff;
    .divider {
      width: 100%;
      height: 48px;
      color: #665e75;
      background: #f7f6fb;
      line-height: 48px;
      text-align: center;
      span {
        display: inline-block;
        width: 32px;
        height: 1px;
        background-image: linear-gradient(to right, #dbd9de, #afabb7);
        vertical-align: middle;
        margin: 0 12px;
        &:last-child {
          background-image: linear-gradient(to left, #dbd9de, #afabb7);
        }
      }
    }
    .imgofGood {
      // margin-bottom: 10px;
      background: #f7f6fb;
      .item {
        width: 100%;
        height: 434px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  // 相关产品
  .aboutProduct {
    background-color: #f7f6fb;
    .title {
      height: 48px;
      font-weight: 600;
      text-align: center;
      line-height: 48px;
      color: #1f0d44;
    }

    .aboutProductList {
      padding: 0 12px;
      display: flex;
      justify-content: space-between;
      align-content: center;
      flex-wrap: wrap;
      .item {
        margin-bottom: 9px;
      }
    }
  }
  // 底部购物车
  .buttom-car {
    .van-button {
      //   width: 104px;
      //   height: 40px;
    }
    ::v-deep {
      //   &.van-goods-action-button--first {
      //     background: #ffffff;
      //     border-radius: 20px;
      //     border: 1px solid #622ccc;
      //     margin-right: 12px;
      //     color: #622ccc;
      //   }
      &.van-goods-action-button--last {
        background: linear-gradient(315deg, #622ccc 0%, #ff5bf4 100%);
        border-radius: 20px;
        margin-right: 12px;
        color: #ffffff;
      }
      .productCloud {
        background: url('../../assets/font/productCloud.png') 20px 20px / cover;
        display: inline-block;
        width: 20px;
        height: 20px;
        vertical-align: bottom;
      }
    }
  }
}
</style>
